<template>
  <div class="container">
    <Category title="美食" >
        <img slot="center" src="https://pic2.zhimg.com/v2-6fa6ec4d24d1dd691a14bc791fbd3927_1440w.jpg?source=172ae18b" alt="">
        <div class="foot" slot="footer"> 
            <a   href="#">更多美食</a>
        </div>
    </Category>
    <Category title="游戏" >
<ul slot="center">
    <li v-for="(g,index) in games" :key="index">{{ g }}</li>
</ul>
<!-- 可以用这个结构来包裹  <template v-slot:footer></template> v-slot仅仅只能由于template标签 -->

<div class="foot" slot="footer">
    <a  href="#">单机游戏</a>
<a  href="#">网络游戏</a>
</div>
    </Category>
    <Category title="电影">
        <video slot="center" controls src="https://tv.sohu.com/v/dXMvMzM1OTQyNzExLzM5NTMyMTEzOC5zaHRtbA==.html"></video>
        <div class="foot" slot="footer">
            <a href="#">经典</a>
            <a href="#">热门</a>
            <a href="#">推荐</a>
        </div>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
name:'App',
components:{Category},
data(){
return {
    foods:['火過','燒烤','小龙虾','牛排'],
    games:['第五人格','原神','部落冲突','明日之后'],
    films:['《教父》','《我不是药神》','《永远在一起》','《喜羊羊》']
}
}
}
</script>

<style>
.container,.foot{
    display: flex;
    justify-content: space-around;
}
img{
width: 100%;
}
video{
    width: 100%;
}
</style>